<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue的父子组件传值问题</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>
    <meta name="format-detection" content="email=no"/>
    <!-- 强制竖屏 -->
    <meta name="screen-orientation" content="portrait">
    <meta name="x5-orientation" content="portrait">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-touch-fullscreen" content="yes"/>
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no" />
    <meta name="applicable-device" content="mobile">
    <meta name="apple-itunes-app" content="app-id=921839681">
    <script src="../js/vue.js"></script>
    <script src="../js/jquery.min.js"></script>

</head>
<body>
    <div id="app">
        <input v-model="inputVal" type="text">
        <button @click="submit">{{submit1}}</button>
        <ul>
            <todo-list v-for="(item,index) of list" :content="item" :index="index" @delete="handleDeleted">

            </todo-list>
        </ul>
    </div>
    <script>
        Vue.component('todo-list',{
            props:['index','content'],
            template:'<li @click="handleDelete">{{content}}</li>',
            methods:{
                handleDelete:function () {
                    this.$emit('delete',this.index)
                }
            }
        })
        new Vue({
            el:'#app',
            data:{
                inputVal:'',
                list:[],
                submit1:'提交',
            },
            methods:{
                submit:function () {
                    if(this.inputVal!=''){
                        this.list.push(this.inputVal)
                        this.inputVal=''
                    }

                },
                handleDeleted:function () {
                    this.list.splice('this.index',1)
                }
            }

        })
    </script>
</body>
</html>